<template>
    <view>
        <cu-custom bgColor="bg-white" :isBack="true">
            <block slot="content">修改绑定手机</block>
        </cu-custom>
        <view class="padding">
            <view class="item crow bg-white radius-xl margin-bottom">
                <view class="right">
                    <input type="tel" class="padding box-unset" placeholder="新手机号" v-model="form.mobile" maxlength="11">
                </view>
            </view>
            <view class="item crow bg-white radius-xl margin-bottom padding-right" v-if="WEBCONFIG.imgcode">
                <view class="right">
                    <input type="text" class="padding box-unset" placeholder="图形验证码" v-model="form.imgcode" maxlength="6">
                </view>
                <image :src="captchaUrl" class="captcha-image" mode="aspectFit" @tap="getCaptchaUrl" />
            </view>
            <view class="item crow bg-white radius-xl margin-bottom">
                <view class="right">
                    <input type="tel" class="padding box-unset" placeholder="验证码" v-model="form.vcode" maxlength="6">
                </view>
                <view class="text-xs text-bold padding" @tap="getVcode"
                    :class="vcodeBtn.disabled ? 'text-dark-light-5' : 'text-primary'">{{ vcodeBtn.text }}</view>
            </view>

            <view class="padding margin-top-lg">
                <view class="flex flex-direction">
                    <button class="cu-btn china-btn-bg lg round" @click="submit()">提交</button>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
    computed: {
        ...mapState({
            USERINFO: state => state.USER.USERINFO,
            WEBCONFIG: state => state.WEBCONFIG
        })
    },
    data() {
        return {
            captchaUrl: '',
            form: {
                mobile: '',
                imgcode: '',
                vcode: '',
            },
            vcodeBtn: {
                text: '获取验证码',
                disabled: false
            }
        };
    },
    onLoad() {
        this.captchaUrl = this.$utils.$http.baseURL + 'Login/captcha';
    },
    methods: {
        submit() {
            uni.showLoading({ title: '保存中...' });
            this.$utils.$api.User.mobile(this.form).then(res => {
                uni.hideLoading();
                this.$utils.$api.User.userinfo(this, true);
                this.$utils.$message.success(res.msg);
                setTimeout(() => {
                    this.$utils.$page.back();
                }, 1000);
            }).catch(err => {
                uni.hideLoading();
                this.$utils.$message.error(err.msg);
            })
        },
        getCaptchaUrl() {
            this.captchaUrl = this.$utils.$http.baseURL + 'Login/captcha?' + Math.random();
        },
        getVcode() {
            if (this.vcodeBtn.disabled) { return; }
            this.$utils.$api.Login.getVcode({
                mobile: this.form.mobile,
                imgcode: this.form.imgcode
            }).then((res) => {
                this.vcodeBtn.disabled = true;
                let time = 60;
                const timer = setInterval(() => {
                    this.vcodeBtn.text = `${time}s`;
                    time--;
                    if (time < 0) {
                        clearInterval(timer);
                        this.vcodeBtn.text = '获取验证码';
                        this.vcodeBtn.disabled = false;
                    }
                }, 1000)
            }).catch(err => {
                this.$utils.$message.error(err.msg);
            });
        },
    }
}
</script>

<style lang="scss" scoped>
.item {
    width: 100%;

    .right {
        flex: 1;

        input {
            font-size: 26upx;
        }
    }

    .locationfill {
        font-size: 35upx;
    }
}

.captcha-image {
    height: 40px;
    width: 100px;
}

.box-unset {
    box-sizing: unset;
}

.text-primary {
    color: var(--theme-color)
}

.text-dark-light-5 {
    color: $u-light-color;
}</style>
